<template>
  <v-layout justify-center align-center>
  <form>
    <h2>登录</h2>
    <v-text-field
      v-model="email"
      :error-messages="emailErrors"
      label="电邮"
      required
      @input="$v.email.$touch()"
      @blur="$v.email.$touch()"
    ></v-text-field>
    <v-text-field
      v-model="password"
      :error-messages="passwordErrors"
      
      label="密码"
      required
      @input="$v.password.$touch()"
      @blur="$v.password.$touch()"
    ></v-text-field>

    <v-btn @click="submit">登录</v-btn>
    <v-btn @click="clear">clear</v-btn>
  </form>
  </v-layout>
</template>

<script>
  import { validationMixin } from 'vuelidate'
  import { required, maxLength, email } from 'vuelidate/lib/validators'

  export default {
    mixins: [validationMixin],

    validations: {
      password: { required },
      email: { required, email },      
    },

    data: () => ({
      password: 'secret',
      email: 'esse.iure@qq.com',
      
     
    }),

    computed: {
      
      passwordErrors () {
        const errors = []
        if (!this.$v.password.$dirty) return errors
        !this.$v.password.required && errors.push('密码是必需的.')
        return errors
      },
      emailErrors () {
        const errors = []
        if (!this.$v.email.$dirty) return errors
        !this.$v.email.email && errors.push('必须是合法的电邮地址')
        !this.$v.email.required && errors.push('必须输入电邮地址')
        return errors
      }
    },

    methods: {
      submit () {
        this.$v.$touch()
        if(!this.$v.$invalid){
            this.$store.dispatch('login',{email: this.email,password: this.password})
        }
      },
      clear () {
        this.$v.$reset()
        this.name = ''
        this.email = ''
        this.select = null
        this.checkbox = false
      }
    }
  }
</script>
